<template>
  <!-- :title="rowsId? '修改标签': '新增标签'" -->
  <!-- title="新增标签" -->
  <el-dialog
    :title="page.rowsId? '修改标签': '新增标签'"
    :visible.sync="showDialog"
    loading
    :close-on-click-modal="close_modal"

    @close="btnCancle"
  >
    <!-- 表单 -->
    <el-form v-if="showDialog" :model="form" label-width="120px">
      <!-- [下拉] -->
      <el-row>
        <el-col :span="12">
          <el-form-item label="归属学科" prop="subject_id">
            <el-select
              v-model="form.subject_id"
              placeholder="归属学科"
              clearable
              @change="selectChangeSub"
            >
              <el-option
                v-for="item in options.options1"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="归属目录" prop="directory_id">
            <el-select
              v-model="form.directory_id"
              placeholder="归属目录"
              clearable
              @change="selectChangeLists"
            >
              <el-option
                v-for="item in options.options2"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="标签名称" prop="tag_name">
            <el-input
              v-model="form.tag_name"
              style="width:80%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排序" prop="sort">
            <template>
              <el-input-number
                v-model="form.sort"
                :min="1"
                :max="10"
                label="描述文字"
                @change="handleChange"
              />
            </template>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-form-item label="是否显示" prop="is_show">
            <el-switch
              v-model="form.is_show"
              active-text="是"
              inactive-text="否"
              :active-value="1"
              :inactive-value="2"
            >
              @change="switchChange"
              />
            </el-switch></el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <!-- footer插槽 -->
    <template v-slot:footer>
      <el-row
        type="flex"
        justify="end"
      >
        <el-col :span="6">
          <el-button
            size="small"
            @click="btnCancle"
          >取消</el-button>
          <el-button
            type="primary"
            size="small"
            @click="addSubjectTag(page.rowsId,form)"
          >确定</el-button>
        </el-col>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
import { addSubjectTag, editSubjectTag } from '@/api/subject'
export default {
  name: 'AddSubjectTag',
  props: {
    options: {
      type: Object,
      required: true
    },
    page: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      close_modal: false,
      loading: false,
      showDialog: false,
      form: {
        tag_name: '', // 输入框默认数据
        is_show: '1',
        sort: 10, // 排序参数
        subject_id: '',
        directory_id: ''
      },
      value: ''

    }
  },

  methods: {
    // 排序组件方法
    handleChange(value) {
      console.log(value)
    },
    // 学科下拉点击

    selectChangeSub(val) {
      this.options.options2.value1 = []
      this.options.options2.value1 = ''
      this.form.directory_id = ''

      this.form.subject_id = val
      const datas = this.options.options1.filter(item => item.id === val)
      console.log(datas)

      this.options.options2 = datas[0].children
    },
    //  目录点击事件s
    async selectChangeLists(val) {
      // console.log(val)

      this.form.directory_id = val
    },

    switchChange(val) {
      this.form.is_show = val.toString()
      console.log(val)
    },
    // 刷新页面
    // async getSubjectTag() {
    //   const { data } = await getSubjectTag(this.page)
    //   this.page.page = data.page
    //   this.page.total = data.total
    //   this.page.limit = data.limit
    //   this.$message.success('123123123131')
    // },
    // 创建学科 / 修改学科信息
    async addSubjectTag(id, form) {
      if (this.page.rowsId) {
        // 修改标签信息
        try {
          this.loading = true
          console.log(id)
          await editSubjectTag(form)
          // this.form.is_show = form.is_show.toString()
          this.$parent.getSubjectTag()

          this.$message.success('修改成功')

          this.form = {
            tag_name: '', // 输入框默认数据
            is_show: '1',
            sort: 10, // 排序参数
            subject_id: null,
            directory_id: null
          }
          this.options.options1.value = ''
          this.options.options2.value1 = ''
          this.value2 = ''

          this.showDialog = false
        } catch (error) {
          console.log(error, '修改失败')
          this.$message('修改标签失败')
        }
        this.loading = false
      } else {
        // 新增标签信息
        try {
          this.loading = true
          await addSubjectTag(form)
          this.$message.success('新增标签成功')
          this.showDialog = false

          this.form = {
            tag_name: '', // 输入框默认数据
            is_show: '1',
            sort: 10, // 排序参数
            subject_id: null,
            directory_id: null
          }
          this.options.options1.value = ''
          this.options.options2.value1 = ''
          this.value2 = ''
          this.$parent.getSubjectTag()
          this.loading = false
        } catch (error) {
          console.log(error, '创建失败')
          this.$message('新增标签失败')
        }

        this.loading = false
      }
    },
    btnCancle() {
      this.showDialog = false
      this.form = {
        tag_name: '', // 输入框默认数据
        is_show: '1',
        sort: 10, // 排序参数
        subject_id: null,
        directory_id: null
      }
      this.options.options1.value = ''
      this.options.options2.value1 = ''
      this.value2 = ''
    }
  }
}

</script>

<style>

</style>

